<template>
  <div class="device">
    <lRTitle :text="statusTitle"></lRTitle>
    <div class="chartsContainer">
      <circular-echarts
        :percentage="diskUsage"
        :label="'磁盘使用率'"
        color1="#006CFF"
        color2="#00CFFF"
      ></circular-echarts>
      <circular-echarts
        :percentage="memUsage"
        :label="'内存使用率'"
        color1="#c94148"
        color2="#ea5864"
      ></circular-echarts>
      <circular-echarts
        :percentage="cpuUsage"
        :label="'CPU使用率'"
        color1="#27c382"
        color2="#2ade91"
      ></circular-echarts>
    </div>
  </div>
</template>

<script>
import circularEcharts from "./circularEcharts.vue";
import lRTitle from "./lRTitle.vue";
import { connrequest } from "@/api/firstPage";

export default {
  name: "deviceStatus",
  props: {},
  data() {
    return {
      statusTitle: "设备运行状态",
      devStatus: {},
      cpuUsage: 0,
      memUsage: 0,
      diskUsage: 0
    };
  },
  watch: {
    devStatus() {
      this.cpuUsage = this.devStatus.CPURate;
      this.memUsage = Math.floor((this.devStatus.MemUsed / this.devStatus.MemTotal) * 100);
      this.diskUsage = Math.floor((this.devStatus.DiskUsed / this.devStatus.DiskTotal) * 100);
    }
  },
  mounted() {
    this.getDeviceStatus();
  },
  methods: {
    async getDeviceStatus() {
      const res = await connrequest("GetFirstPage");
      if (res.Status.StatusCode === 0) {
        this.devStatus = res.Data;
      }
    }
  },
  components: {
    lRTitle,
    circularEcharts
  }
};
</script>
<style scoped>
.device {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 28%;
}
.chartsContainer {
  display: flex;
  margin-top: 5%;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
}
</style>
